<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6" class="leftTree"  style="padding: 0;">
                <h1>组织结构</h1>
                <el-tree :default-expand-all="true" :data="data" :props="defaultProps" @node-click="handleNodeClick">
                </el-tree>
            </el-col>
            <el-col :span="18">
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from '../../util/request';
    export default {
        name: 'CodeUIMenuList',

        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'menuName'
                },
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: []
            };
        },

        mounted() {
            axios.get('/api/menu').then(m => {
                this.data = m.data;
            });
        },

        methods: {
            handleNodeClick(a,b,c) {
                console.log(a,b,c);
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
    };
</script>

<style scoped>
    .leftTree{
        border: 1px solid rgb(227, 227, 227);
        border-radius: 3px;
        height: calc(100vh - 100px);
        padding: 0;
    }

    .leftTree h1{
        height: 36px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #e3e3e3;
    }

    .leftTree .el-tree{
        background: none;
    }

    .leftTree .el-tree-node__content:hover, .el-upload-list__item:hover{
        background: #e3e3e3;
    }
</style>